<template>
  <div>
    <el-button @click="startRecord">开始录音</el-button>
    <!-- <el-button @click="transformToPMC">MP3转PCM</el-button> -->
  </div>
</template>

<script>
import { defineComponent } from 'vue'
export default defineComponent({
  data () {
    return {
      rec: null,
      blob: null
    }
  },
  methods: {
    startRecord () {
      // 这里假设立即运行，只录3秒，录完后立即播放，本段代码copy到控制台内可直接运行
      this.recOpen(() => {
        this.recStart()
        setTimeout(this.recStop, 10000)
      })
    },
    /** 调用open打开录音请求好录音权限 **/
    recOpen (success) { // 一般在显示出录音按钮或相关的录音界面时进行此方法调用，后面用户点击开始录音时就能畅通无阻了
      this.rec = window.Recorder({
        type: 'wav',
        sampleRate: 16000,
        bitRate: 16, // mp3格式，指定采样率hz、比特率kbps，其他参数使用默认配置；注意：是数字的参数必须提供数字，不要用字符串；需要使用的type类型，需提前把格式支持文件加载进来，比如使用wav格式需要提前加载wav.js编码引擎
        onProcess: (buffers, powerLevel, bufferDuration, bufferSampleRate, newBufferIdx, asyncEnd) => {
          // 录音实时回调，大约1秒调用12次本回调
          // 可利用extensions/waveview.js扩展实时绘制波形
          // window.wave.input(buffers[buffers.length - 1], powerLevel, bufferSampleRate)// 输入音频数据，更新显示波形
          // 可利用extensions/sonic.js扩展实时变速变调，此扩展计算量巨大，onProcess需要返回true开启异步模式
        }
      })

      // var dialog=createDelayDialog(); 我们可以选择性的弹一个对话框：为了防止移动端浏览器存在第三种情况：用户忽略，并且（或者国产系统UC系）浏览器没有任何回调，此处demo省略了弹窗的代码
      this.rec.open(() => { // 打开麦克风授权获得相关资源
        console.log('this.rec: ', this.rec)
        // dialog&&dialog.Cancel(); 如果开启了弹框，此处需要取消
        // rec.start() 此处可以立即开始录音，但不建议这样编写，因为open是一个延迟漫长的操作，通过两次用户操作来分别调用open和start是推荐的最佳流程

        success && success()
      }, (msg, isUserNotAllow) => { // 用户拒绝未授权或不支持
      // dialog&&dialog.Cancel(); 如果开启了弹框，此处需要取消
        console.log((isUserNotAllow ? 'UserNotAllow，' : '') + '无法录音:' + msg)
      })
    },
    /** 开始录音 **/
    recStart () { // 打开了录音后才能进行start、stop调用
      this.rec.start()
    },
    /** 结束录音**/
    recStop () {
      this.rec.stop((blob, duration) => {
        console.log(blob, (window.URL || window.webkitURL).createObjectURL(blob), '时长:' + duration + 'ms')
        this.rec.close()// 释放录音资源，当然可以不释放，后面可以连续调用start；但不释放时系统或浏览器会一直提示在录音，最佳操作是录完就close掉
        this.rec = null
        this.blob = blob

        // 已经拿到blob文件对象想干嘛就干嘛：立即播放、上传

        /** * 【立即播放例子】 ***/
        var audio = document.createElement('audio')
        audio.controls = true
        document.body.appendChild(audio)
        // 简单利用URL生成播放地址，注意不用了时需要revokeObjectURL，否则霸占内存
        audio.src = (window.URL || window.webkitURL).createObjectURL(blob)
        audio.play()

        // sl-转换格式
        this.transformToPMC()

        // sl-下载pmc
        this.download()
      }, (msg) => {
        console.log('录音失败:' + msg)
        this.rec.close()// 可以通过stop方法的第3个参数来自动调用close
        this.rec = null
      })
    },
    transformToPMC () {
      this.blob.slice(44, this.blob.size, 'audio/pcm')
      console.log('this.blob: ', this.blob)
    },
    download () {
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = (window.URL || window.webkitURL).createObjectURL(this.blob)
      link.setAttribute('download', 'record.pcm')
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
  }
})
</script>

<style>

</style>
